<template>
  <div style="width: 100%; height: 100%">
    <div>
      <div class="ad">
        <div class="bg"></div>
        <div class="squir1"></div>
        <div class="squir2"></div>
        <p class="p1">够专业 才放心</p>
        <p class="p2">力求每件产品、每个细节都尽善尽美</p>
        <p class="p3">双线质量管控体</p>
      </div>

      <!-- 登录 -->
      <div class="login loginBox">
        <p class="welcome">欢迎使用</p>
        <p class="login_system">系统登陆</p>

        <el-form :model="ruleForm" :hide-required-asterisk="true" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
          <!-- 用户名 -->
          <div  class="inputbox">
          <el-form-item label="用户名" prop="userName" class="username_pwd">
            <el-input v-model="ruleForm.userName">
              <img  slot="prefix"  class="username_img"  src="../assets/img/username.png" />
            </el-input>
          </el-form-item>
          </div>

          <!-- 密码 -->
            <div  class="inputbox">
          <el-form-item label="密码" prop="passWord" class="username_pwd">
            <el-input v-model="ruleForm.passWord" type="password">
              <img  slot="prefix"  class="username_img"  src="../assets/img/pwd.png" />
            </el-input>
          </el-form-item>
          </div>
        </el-form>

        <!-- 登录 -->
        <div class="Bbox">
          <div class="login_button" @click="submitFrom">
            <p class="login_text">登录</p>
          </div>
        </div>
      </div>

      <div class="copy">
        <p class="foot">
          All_Rights_Reserved_©2021_版权所有__｜_粤ICP备18069755号
        </p>
        <p class="foot_b">ORDER聚造</p>
        <p class="foot_w">ORDER聚造</p>
      </div>
    </div>
  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'
import md5 from 'js-md5'
// import axios from 'axios'


export default {
  name: "App",
  components: {
    //HelloWorld
  },
  data() {
    return {
      ruleForm: {
        userName: '',
        passWord:''
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" },
        ],

        passWord:[
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 16, message: "长度在 6 到 16个字符", trigger: "blur" },
        ]
      },
    };
  },
  methods: {
    submitFrom(){
      this.$refs.ruleForm.validate((valid)=>{
        if(valid){

          this.$http({
            url:'/login',
            method:'POST',
            data:{
              userName:this.ruleForm.userName,
              passWord:md5(this.ruleForm.passWord),
              platform:'Web'
            }
          }).then(res =>{
            if(!res.errorMsg){
              localStorage.setItem('token',res.token),
               localStorage.setItem('user',JSON.stringify(res))
               this.$router.push('/index')
            }
          })
        }
      })
    }

  },
  created() {

  },
  mounted() {

  },
};
</script>

<style scoped>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
/* .app1{
  background:url('/image/test.png');
  height: 300px;
} */

.bg {
  background-image: url("../assets/img/bg.png");
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1366px;
  height: 768px;
  /* width: 100%;
  height: 100%; */
  z-index: 2;
}

.squir1 {
  background-color: rgb(225, 242, 249);
  opacity: 0.3;
  position: absolute;
  left: 85px;
  top: 202px;
  width: 118px;
  height: 162px;
  z-index: 7;
}

.squir2 {
  background-color: rgb(225, 242, 249);
  opacity: 0.3;
  position: absolute;
  left: 157px;
  top: 363px;
  width: 135px;
  height: 165px;
  z-index: 8;
}

.p1 {
  font-size: 35px;
  font-family: "Microsoft YaHei UI";
  color: rgb(107, 185, 218);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  position: absolute;
  left: 213px;
  top: 239px;
  z-index: 9;
  writing-mode: tb-rl;
  height: 500px;
}

.p2 {
  height: 500px;
  font-size: 20px;
  font-family: "Microsoft YaHei UI";
  color: rgb(255, 255, 255);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  position: absolute;
  left: 173px;
  top: 180px;
  z-index: 11;
  writing-mode: tb-rl;
}

.p3 {
  font-size: 22px;
  font-family: "Microsoft YaHei UI";
  color: rgb(254, 254, 254);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  position: absolute;
  left: 133px;
  top: 197px;
  z-index: 10;
  writing-mode: tb-rl;
  height: 500px;
}

.login {
  border-radius: 20px;
  background-color: rgb(239, 239, 240);
  opacity: 0.9;
  position: absolute;
  left: 650px;
  top: 450px;
  width: 359px;
  height: 359px;
  z-index: 3;
  /* position:fixed;
top: 30%;
right: 20%; */
}

.welcome {
  font-size: 17.382px;
  font-family: "Microsoft YaHei UI";
  color: rgb(150, 163, 176);
  line-height: 1.2;
  position: relative;
  left: -110px;
  top: 30px;
  z-index: 14;
}

.login_system {
  font-size: 26px;
  font-family: "Microsoft YaHei UI";
  color: rgb(78, 78, 78);
  font-weight: bold;
  line-height: 1.2;
  position: relative;
  left: 10px;
  top: 40px;
  /* bottom: 20px; */
  width: 143px;
  height: 34px;
  z-index: 13;
}

.inputbox {
  /* background-color: red; */
  position: relative;
  top: 50px;
  margin-top: 5px;
  height: 70px;
}

.Bbox {
  position: relative;
  top: 120px;
}

.username_pwd {
  font-size: 15px;
  font-family: "Microsoft YaHei UI";
  color: rgb(115, 116, 116);
  line-height: 1.2;
  position: relative;
  left: -30px;
 top: 15px;
  z-index: 15;
  /* background-color:blue; */
  
}



.username_img {
  position: relative;
  width: 12px;
  height: 14px;
  z-index: 21;
}



.pwd_img {
 
  position: relative;
  bottom: 60px;
  left: 80px;
  width: 12px;
  height: 13px;
  z-index: 22;
}



.login_button {
  background-color: rgb(64, 158, 255);
  position: relative;
  left: 40px;
  width: 290px;
  height: 39px;
  z-index: 19;
  border-radius: 30px;
  bottom: 60px;
}

.login_text {
  font-size: 15px;
  font-family: "Microsoft YaHei UI";
  color: rgb(244, 244, 245);
  line-height: 1.2;
  text-align: center;
  position: relative;
  z-index: 20;
  top: 10px;
}

.foot {
  font-size: 13px;
  font-family: "Microsoft YaHei UI";
  color: rgb(86, 86, 86);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  position: absolute;
  left: 450px;
  top: 719.765px;
  z-index: 12;
}

.foot_b {
  font-size: 18px;
  font-family: "Microsoft YaHei UI";
  color: rgb(64, 158, 255);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  position: absolute;
  left: 1091px;
  top: 714px;
  z-index: 5;
}

.foot_w {
  font-size: 25px;
  font-family: "Microsoft YaHei UI";
  color: rgba(215, 232, 250, 0.302);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  position: absolute;
  left: 1100px;
  top: 695px;
  z-index: 4;
}
/* @media screen and (max-width: 1440px) {
  .loginBox {
    transform: translate(50px, -55%) scale(0.8);
  }

  .ad {
    transform: translate(-100px, -50%) scale(0.8);
  }

  .copy {
    transform: translate(0px, 10px) scale(0.8);
  }
} */
</style>
